<template>
	<view class="container">
		<view class="data-panel">
			<view class="data-core-text">核心数据</view>
			<view class="line"></view>
			<view class="search-type">
				<view class="time-type">
					<view class="search-tip">时间类型:</view>
					<view class="time-select">
						<view>
							<uni-datetime-picker type="date" :disabled="true">
								<uni-tag text="今日" type="success" :inverted="selTag != 0" @click="tagClick(0)" />
							</uni-datetime-picker>
						</view>
						<view>
							<picker mode="date" @change="dayChange">
								<uni-tag text="日" type="success" :inverted="selTag != 1" @click="tagClick(1)" />
							</picker>
						</view>
						<view>
							<picker mode="date" value="YYYY-MM" @change="monthChange" fields="month">
								<uni-tag text="月" type="success" :inverted="selTag != 2" @click="tagClick(2)" />
							</picker>
						</view>
						<view>
							<uni-datetime-picker type="daterange" @change="rangeChange">
								<uni-tag text="自定义" type="success" :inverted="selTag != 3" @click="tagClick(3)" />
							</uni-datetime-picker>
						</view>
					</view>
				</view>
				<view class="up-time">
					<view class="search-tip">查询时间:</view>
					<view class="time-show">
						{{timeShow}}
					</view>
				</view>
			</view>

			<view class="data-show">
				<view class="item">
					<view class="">总订单金额(元)</view>
					<view class="item-content">{{priceTransform(dataCenter.orderMoney || 0)}}</view>
				</view>
				<view class="item">
					<view class="">总订单数</view>
					<view class="item-content">{{dataCenter.orderNum || 0}}</view>
				</view>
				<view class="item">
					<view class="">总下单人数</view>
					<view class="item-content">{{dataCenter.buyerNum || 0}}</view>
				</view>
				<view class="item">
					<view class="">总收入(元)</view>
					<view class="item-content">{{priceTransform(dataCenter.totalIncome||0)}}</view>
				</view>
				<!-- <view class="item">
					<view class="">访问人数</view>
					<view class="item-content">{{dataCenter.visitorCount || 0}}</view>
				</view>
				<view class="item">
					<view class="">浏览次数</view>
					<view class="item-content">{{dataCenter.pvCount || 0}}</view>
				</view>
				<view class="item">
					<view class="">新客户人数</view>
					<view class="item-content">{{dataCenter.firstBuys || 0}}</view>
				</view>
				<view class="item">
					<view class="">退款金额(元)</view>
					<view class="item-content">{{priceTransform(dataCenter.refundMoney||0)}}</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getTodayData,
		getAnyDayData,
		getAnyMonthData,
		getRangeData
	} from '@/api/shops/dataCenter/dataCenter.js'
	import {
		transform
	} from '@/minix/mixin.js'
	import {
		formatDate
	} from '@/uni_modules/uni-dateformat/components/uni-dateformat/date-format.js'
	export default {
		mixins: [transform],
		data() {
			return {
				shopId: '',
				searchTime: '',
				timeShow: '',
				startTime: '',
				endTime: '',
				dataCenter: {
					orderMoney:0,
					orderNum:0,
					buyerNum:0,
					totalIncome:0,
					visitorCount:0,
					pvCount:0,
					firstBuys:0,
					refundMoney:0,
				},
				selTag: 0,
				req: {
					shopId: ''
				}
			}
		},
		onLoad: function(option) {
			this.shopId = option.shopId
			this.req.shopId = option.shopId
			this.init()
		},
		watch: {
			searchTime(val) {
				if (this.selTag == 0) {
					this.timeShow = formatDate(val, 'hh:mm')
				} else if (this.selTag == 1) {
					this.timeShow = formatDate(val, 'yyyy-MM-dd')
				} else if (this.selTag == 2) {
					this.timeShow = formatDate(val, 'yyyy-MM')
				} else {
					this.timeShow = formatDate(val[0], 'yyyy-MM-dd') + ' - ' + formatDate(val[1], 'yyyy-MM-dd')
				}
			}
		},
		methods: {
			init() {
				getTodayData().then((res) => {
					if (res.code == 200) {
						if(res.data) {
							this.dataCenter = res.data
						} else {
							Object.keys(this.dataCenter).forEach(key => {
								this.dataCenter[key] = 0
							})
						}
						if (this.selTag == 0) {
							this.searchTime = Date.now()
						}
					}
				})
			},
			tagClick(index) {
				if (this.selTag != index) {
					this.selTag = index
					if (index == 0) {
						delete this.req.startTime
						delete this.req.endTime
						this.init()
					}
				}
			},

			dayChange(e) {
				getAnyDayData({anyDay:  e.detail.value}).then((res) => {
					if(res.data) {
						this.dataCenter = res.data
					} else {
						Object.keys(this.dataCenter).forEach(key => {
							this.dataCenter[key] = 0
						})
					}
				})
				this.searchTime = e.detail.value
			},
			monthChange(e) {
				getAnyMonthData({anyMonth: e.detail.value}).then((res) => {
					if(res.data) {
						this.dataCenter = res.data
					} else {
						Object.keys(this.dataCenter).forEach(key => {
							this.dataCenter[key] = 0
						})
					}
				})
				this.searchTime = e.detail.value
			},
			rangeChange(e) {
				getRangeData({startTime:e[0],endTime:e[1]}).then((res) => {
					if(res.data) {
						this.dataCenter = res.data
					} else {
						Object.keys(this.dataCenter).forEach(key => {
							this.dataCenter[key] = 0
						})
					}
				})
				this.searchTime = e
			}
		}
	}
</script>

<style lang="scss">
	.data-panel {
		background-color: #fff;
		margin-top: 10px;

		.data-core-text {
			font-size: 16px;
			font-weight: 600;
			padding: 10px;
		}

		.line {
			border-bottom: 1px solid #ababab;
		}

		.search-type {
			padding: 10px 20px;

			.search-tip {
				font-size: 14px;
				font-weight: 400;
				white-space: nowrap;
			}

			.time-type {
				display: flex;
				flex-direction: row;
				align-items: center;

				.time-select {
					display: flex;
					flex-direction: row;
					flex: 1;
					margin-left: 10px;
					justify-content: space-around;
				}
			}

			.up-time {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 10px;
				height: 20px;

				.time-show {
					margin-left: 10px;
				}
			}
		}

		.data-show {
			display: grid;
			grid-template-columns: 50% 50%;
			margin-top: 10px;

			.item {
				border: 1px solid #ababab;
				margin-left: -1px;
				margin-top: -1px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 10px 0;
				font-weight: 500;
				font-size: 14px;

				.item-content {
					font-weight: bold;
					margin-top: 5px;
				}
			}
		}
	}
</style>